<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Buttons & Icons - eKoders Responsive Admin Theme</title>
	
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fonts.css">
	<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
	
	<!-- PAGE LEVEL PLUGINS STYLES -->
	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<link rel="stylesheet" type="text/css" href="assets/css/plugins/gritter/jquery.gritter.css" />	

    <!-- Tc core CSS -->
	<link id="qstyle" rel="stylesheet" href="assets/css/themes/style.css">
	
	
    <!-- Add custom CSS here -->
	<link rel="stylesheet" href="assets/css/only-for-demos.css">
	<!-- End custom CSS here -->
	
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
	
  </head>

  <body>
	<div id="wrapper">
		<div id="main-container">		
			<!-- BEGIN TOP NAVIGATION -->
				<nav class="navbar-top" role="navigation">
					<!-- BEGIN BRAND HEADING -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".top-collapse">
							<i class="fa fa-bars"></i>
						</button>
						<div class="navbar-brand">
							<a href="index.html">
								<img src="assets/images/logo.png" alt="logo" class="img-responsive">
							</a>
						</div>
					</div>
					<!-- END BRAND HEADING -->
					<div class="nav-top">
						<!-- BEGIN RIGHT SIDE DROPDOWN BUTTONS -->
							<ul class="nav navbar-right">
								<li class="dropdown">
									<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
										<i class="fa fa-bars"></i>
									</button>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-envelope"></i> <span class="badge up badge-primary">2</span></a>
											<ul class="dropdown-menu dropdown-scroll dropdown-messages">
												<li class="dropdown-header">
													<i class="fa fa-envelope"></i> 2 New Messages
												</li>
												<li id="messageScroll">
													<ul class="list-unstyled">
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-1.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>John Smith</strong>: Hi again! I wanted to let you know that the order...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 5 minutes ago
																		</p>
																	</div>
																</div>
															</a>
														</li>
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-2.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>Roddy Austin</strong>: Thanks for the info, if you need anything...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 3:39 PM
																		</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>
												</li>
												<li class="dropdown-footer">
													<a href="#">
														Read All Messages
													</a>
												</li>
											</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-bell"></i> <span class="badge up badge-success">3</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-alerts">
											<li class="dropdown-header">
												<i class="fa fa-bell"></i> 3 New Alerts
											</li>
											<li id="alertScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<div class="alert-icon bg-info pull-left">
																<i class="fa fa-download"></i>
															</div>
																Downloads <span class="badge badge-info pull-right">16</span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-success pull-left">
																<i class="fa fa-cloud-upload"></i>
															</div>
																Server #8 Rebooted <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-danger pull-left">
																<i class="fa fa-bolt"></i>
															</div>
																Server #8 Crashed <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Alerts
												</a>
											</li>
										</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-tasks"></i> <span class="badge up badge-info">7</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-tasks">
											<li class="dropdown-header">
												<i class="fa fa-tasks"></i> 10 Pending Tasks
											</li>
											<li id="taskScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<p>
																Purchase Order #439 <span class="pull-right"><strong>52%</strong></span>
															</p>
															<div class="progress progress-striped">
																	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100" style="width: 52%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																March Content Update <span class="pull-right"><strong>14%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Client #42 Data Scrubbing <span class="pull-right"><strong>68%</strong></span>
															</p>
															<div class="progress progress-striped">
																<div class="progress-bar" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																PHP Upgrade Server #6 <span class="pull-right"><strong>85%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Malware Scan <span class="pull-right"><strong>66%</strong></span>
															</p>
															<div class="progress progress-striped active">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="width: 66%;"></div>
															</div>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Tasks
												</a>
											</li>
										</ul>
								</li>
								<!--Speech Icon-->
								<li class="dropdown">
									<a href="#" class="speech-button">
										<i class="fa fa-microphone"></i>
									</a>
								</li>
								<!--Speech Icon-->
								<li class="dropdown user-box">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<img class="img-circle" src="assets/images/user.jpg" alt=""> <span class="user-info">John Smith</span> <b class="caret"></b>
									</a>
										<ul class="dropdown-menu dropdown-user">
											<li>
												<a href="profile.html">
													<i class="fa fa-user"></i> My Profile
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-envelope"></i> My Messages
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-tasks"></i> My Tasks
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-gear"></i> Settings
												</a>
											</li>											
											<li>
												<a href="login.html">
													<i class="fa fa-power-off"></i> Logout
												</a>
											</li>
										</ul>
								</li>
								<!--Search Box-->
								<li class="dropdown nav-search-icon">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<span class="glyphicon glyphicon-search"></span>
									</a>
									<ul class="dropdown-menu dropdown-search">
										<li>
											<div class="search-box">
												<form class="" role="search">
													<input type="text" class="form-control" placeholder="Search" />
												</form>
											</div>
										</li>
									</ul>
								</li>
								<!--Search Box-->
							</ul>
						<!-- END RIGHT SIDE DROPDOWN BUTTONS -->							
						<!-- BEGIN TOP MENU -->
							<div class="collapse navbar-collapse top-collapse">
								<!-- .nav -->
								<ul class="nav navbar-left navbar-nav">
									<li><a href="index.html">Dashboard</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											Components <b class="caret"></b>
										</a>
										<ul class="dropdown-menu">
											<li><a href="elements-ui.html">Elements</a></li>
											<li><a href="button-ui.html">Buttons & Icons</a></li>
											<li><a href="portlet.html">Portlet</a></li>
											<li><a href="jquery-ui.html">jQuery UI</a></li>
										</ul>
									</li>
									<li><a href="front/index.html">FrontEnd <span class="badge badge-primary">New</span></a></li>
								</ul><!-- /.nav -->
							</div>
						<!-- END TOP MENU -->
					</div><!-- /.nav-top -->
				</nav><!-- /.navbar-top -->
				<!-- END TOP NAVIGATION -->

				
				<!-- BEGIN SIDE NAVIGATION -->				
				<nav class="navbar-side" role="navigation">
					<div class="navbar-collapse sidebar-collapse collapse">
					
						<!-- BEGIN SHORTCUT BUTTONS -->
						<div class="media">							
							<ul class="sidebar-shortcuts">
								<li><a class="btn"><i class="fa fa-user icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-envelope icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-th icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-gear icon-only"></i></a></li>
							</ul>	
						</div>
						<!-- END SHORTCUT BUTTONS -->	
							
						<!-- BEGIN FIND MENU ITEM INPUT -->
						<div class="media-search">	
							<input type="text" class="input-menu" id="input-items" placeholder="Find...">
						</div>						
						<!-- END FIND MENU ITEM INPUT -->
						
						<ul id="side" class="nav navbar-nav side-nav">
							<!-- BEGIN SIDE NAV MENU -->							
							<!-- Navigation category -->
							<li>
								<h4>Navigation</h4> 								
							</li>
							<!-- END Navigation category -->
							
							<li>
								<a href="index.html">
									<i class="fa fa-dashboard"></i> Dashboard
								</a>
							</li>
							<!-- BEGIN COMPONENTS DROPDOWN -->
							<li  class="panel open">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#components">
									<i class="fa fa-cogs"></i> Components <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav in" id="components">
										<li>
											<a href="portlet.html">
												<i class="fa fa-angle-double-right"></i> Portlets
											</a>
										</li>
										<li>
											<a href="elements-ui.html">
												<i class="fa fa-angle-double-right"></i> Elements <span class="label label-sm label-primary">New</span>
											</a>
										</li>
										<li>
											<a href="tabs_accordions-ui.html">
												<i class="fa fa-angle-double-right"></i> Tabs & Accordions
											</a>
										</li>
										<li>
											<a class="active" href="button-ui.html">
												<i class="fa fa-angle-double-right"></i> Buttons & Icons
											</a>
										</li>
										<li>
											<a href="jquery-ui.html">
												<i class="fa fa-angle-double-right"></i> JQuery UI
											</a>
										</li>
										<li>
											<a href="nestable-list.html">
												<i class="fa fa-angle-double-right"></i> Nestable Lists
											</a>
										</li>
										<li>
											<a href="calendar.html">
												<i class="fa fa-angle-double-right"></i> Calendar
											</a>
										</li>
										<!-- BEGIN THREE LEVEL MENU -->
										<li>
											<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu">
												<i class="fa fa-angle-double-right"></i> Three Level Menu <span class="fa arrow"></span>
											</a>
												<ul class="collapse nav" id="sub-menu">
													<li>
														<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item <span class="badge badge-primary">3</span></a>
													</li>
													<!-- BEGIN 4th LEVEL MENU -->
													<li>
														<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu2">
															<i class="fa fa-angle-double-right"></i> 4rth Level <span class="fa arrow"></span>
														</a>
															<ul class="collapse nav" id="sub-menu2">
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item1 </a>
																</li>
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item2</a>
																</li>
															</ul>
													</li>
													<!-- END 4th LEVEL MENU -->
												</ul>
										</li>
										<!-- ENDTHREE LEVEL MENU -->
									</ul>
							</li>
							<!-- END COMPONENTS DROPDOWN -->							
							<li>
								<a href="tables.html">
									<i class="fa fa-list"></i> Tables<span class="badge badge-primary">New</span> 
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-text-width"></i> Typography 
								</a>
							</li>
							<!-- BEGIN FORMS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#forms">
									<i class="fa fa-edit"></i> Forms <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="forms">
										<li>
											<a href="forms.html">
												<i class="fa fa-angle-double-right"></i> Form Elements 
											</a>
										</li>
										<li>
											<a href="form-tools.html">
												<i class="fa fa-angle-double-right"></i> Form Tools 
											</a>
										</li>										
										<li>
											<a href="form-wizard.html">
												<i class="fa fa-angle-double-right"></i> Wizard & Validation
											</a>
										</li>
									</ul>
							</li>
							<!-- END FORMS DROPDOWN -->

							<!-- BEGIN CHARTS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#charts">
									<i class="fa fa-bar-chart-o"></i> Charts <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="charts">
										<li>
											<a href="flot.html">
												<i class="fa fa-angle-double-right"></i> Flot Charts 
											</a>
										</li>
										<li>
											<a href="morris.html">
												<i class="fa fa-angle-double-right"></i> Morris Charts 
											</a>
										</li>
									</ul>
							</li>
							<!-- END CHARTS DROPDOWN -->
							
							<!-- Navigation category -->
							<li>
								<h4>Support</h4> 								
							</li>
							<!-- END Navigation category -->

							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#e-pages">
									<i class="fa fa-shopping-cart"></i> eCommerce <span class="fa arrow"></span>
								</a>
								<ul class="collapse nav" id="e-pages">
									<li>
										<a href="products.html">
											<i class="fa fa-angle-double-right"></i> Products Listing
										</a>
									</li>
								</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
							
							<!-- BEGIN PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#pages">
									<i class="fa fa-list"></i> Additional Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="pages">
										<li>
											<a href="profile.html">
												<i class="fa fa-angle-double-right"></i> User Profile 
											</a>
										</li>
										<li>
											<a href="inbox.html">
												<i class="fa fa-angle-double-right"></i> Inbox 
											</a>
										</li>
										<li>
											<a href="pricing.html">
												<i class="fa fa-angle-double-right"></i> Pricing Tables
											</a>
										</li>
										<li>
											<a href="invoice.html">
												<i class="fa fa-angle-double-right"></i> Invoice
											</a>
										</li>
										<li>
											<a href="timeline.html">
												<i class="fa fa-angle-double-right"></i> Timeline
											</a>
										</li>
										<li>
											<a href="login.html">
												<i class="fa fa-angle-double-right"></i> Login & Register 
											</a>
										</li>
										<li>
											<a href="faqs.html">
												<i class="fa fa-angle-double-right"></i> FAQs
											</a>
										</li>
										<li>
											<a href="blank.html">
												<i class="fa fa-angle-double-right"></i> Blank Page
											</a>
										</li>
									</ul>
							</li>
							<!-- END PAGES DROPDOWN -->
							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#m-pages">
									<i class="fa fa-tag"></i> More Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="m-pages">
										<li>
											<a href="gallery.html">
												<i class="fa fa-angle-double-right"></i> Gallery
											</a>
										</li>
										<li>
											<a href="error-404.html">
												<i class="fa fa-angle-double-right"></i> Error 404
											</a>
										</li>
										<li>
											<a href="error-500.html">
												<i class="fa fa-angle-double-right"></i> Error 505
											</a>
										</li>
									</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
						</ul><!-- /.side-nav -->

						<div class="sidebar-labels">
							<h4>Labels</h4>							
							<ul>
								<li><a href="#"><i class="fa fa-circle-o text-primary"></i> My Recent <span class="badge badge-primary">3</span></a></li>
								<li><a href="#"><i class="fa fa-circle-o text-success"></i> Background</a></li>
							</ul>
						</div>
						
						<div class="sidebar-alerts">							
							<div class="alert fade in">
								<span>Sales Report</span>
								<div class="progress progress-mini progress-striped active no-margin-bottom">
									<div class="progress-bar progress-primary" style="width: 36%"></div>
								</div>
								<small>Calculating daily bias... 36%</small>
							</div>
						</div>
						
					</div><!-- /.navbar-collapse -->
				</nav><!-- /.navbar-side -->
				<!-- END SIDE NAVIGATION -->
				

				<!-- BEGIN MAIN PAGE CONTENT -->
				<div id="page-wrapper">
					<!-- BEGIN PAGE HEADING ROW -->
						<div class="row">
							<div class="col-lg-12">
								<!-- BEGIN BREADCRUMB -->
								<div class="breadcrumbs">
									<ul class="breadcrumb">
										<li>
											<a href="#">Home</a>
										</li>
										<li><a href="#">Components</a></li>
										<li class="active">Buttons & Icons</li>
									</ul>
									
									<div class="b-right hidden-xs">
										<ul>
											<li><a href="#" title=""><i class="fa fa-signal"></i></a></li>
											<li><a href="#" title=""><i class="fa fa-comments"></i></a></li>
											<li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="fa fa-plus"></i><span> Tasks</span></a>
												<ul class="dropdown-menu dropdown-primary dropdown-menu-right">
													<li><a href="#">Add new task</a></li>
													<li><a href="#">Statement</a></li>
													<li><a href="#">Settings</a></li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
								<!-- END BREADCRUMB -->
								
								<div class="page-header title">
								<!-- PAGE TITLE ROW -->
									<h1>Buttons & Icons <span class="sub-title">awesome colourful styles</span></h1>								
								</div>
								
								<!-- /#ek-layout-button -->	
								<div class="qs-layout-menu">
									<div class="btn btn-gray qs-setting-btn" id="qs-setting-btn">
										<i class="fa fa-cog bigger-150 icon-only"></i>
									</div>
									<div class="qs-setting-box" id="qs-setting-box">
									
										<div class="hidden-xs hidden-sm">
											<span class="bigger-120">Layout Options</span>
											
											<div class="hr hr-dotted hr-8"></div>
											<label>
												<input type="checkbox" class="tc" id="fixed-navbar" />
													<span id="#fixed-navbar" class="labels"> Fixed NavBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="fixed-sidebar" />
													<span id="#fixed-sidebar" class="labels"> Fixed NavBar+SideBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="sidebar-toggle" />
													<span id="#sidebar-toggle" class="labels"> Sidebar Toggle</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="in-container" />
													<span id="#in-container" class="labels"> Inside<strong>.container</strong></span>
											</label>
										
											<div class="space-4"></div>
										</div>
										
										<span class="bigger-120">Color Options</span>
										
										<div class="hr hr-dotted hr-8"></div>
										
										<label>
											<input type="checkbox" class="tc" id="side-bar-color" />
											<span id="#side-bar-color" class="labels"> SideBar (Light)</span>
										</label>
										
										<ul>									
											<li><button class="btn" style="background-color:#d15050;" onclick="swapStyle('assets/css/themes/style.css')"></button></li>
											<li><button class="btn" style="background-color:#86618f;" onclick="swapStyle('assets/css/themes/style-1.css')"></button></li> 
											<li><button class="btn" style="background-color:#ba5d32;" onclick="swapStyle('assets/css/themes/style-2.css')"></button></li>
											<li><button class="btn" style="background-color:#488075;" onclick="swapStyle('assets/css/themes/style-3.css')"></button></li>
											<li><button class="btn" style="background-color:#4e72c2;" onclick="swapStyle('assets/css/themes/style-4.css')"></button></li>
										</ul>
										
									</div>
								</div>
								<!-- /#ek-layout-button -->				
								
							</div><!-- /.col-lg-12 -->
						</div><!-- /.row -->
					<!-- END PAGE HEADING ROW -->					
						<div class="row space-2x">
							<div class="col-lg-12">
							
							<!-- START YOUR CONTENT HERE -->
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>Apps Buttons</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#apps-button"><i class="fa fa-chevron-down"></i></a>
											<span class="divider"></span>
											<a href="#" class="box-close"><i class="fa fa-times"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="apps-button" class="panel-collapse collapse in">
										<div class="portlet-body">
											<p>Add the classes <code>.btn.btn-app</code> or <code>.btn.btn-app big</code> to an <code>&lt;a></code> tag to achieve the following:</p>
											<div class="btn-margin-bottom-5">
												<a class="btn btn-app"><i class="fa fa-edit"></i>Edit</a>
												<a class="btn btn-app"><i class="fa fa-play"></i>Play</a>
												<a class="btn btn-app"><i class="fa fa-repeat"></i>Repeat</a>
												<a class="btn btn-app"><i class="fa fa-pause"></i>Pause</a>
												<a class="btn btn-app big"><i class="fa fa-save text-primary"></i>Save</a>
												<a class="btn btn-app"><span class="badge badge-inverse">3</span><i class="fa fa-bullhorn"></i> Notifications</a>
												<a class="btn btn-app"><span class="badge badge-primary">300</span><i class="fa fa-barcode"></i> Products</a>
												<a class="btn btn-app"><span class="badge badge-success">891</span><i class="fa fa-users"></i> Users</a>
												<a class="btn btn-app"><span class="badge badge-info">67</span><i class="fa fa-inbox"></i> Orders</a>
												<a class="btn btn-app"><span class="badge badge-warning">12</span><i class="fa fa-envelope"></i> Inbox</a>
												
												
											</div>													
										</div>
									</div>
								</div>
															
								<div class="row">
									<div class="col-lg-6 col-md-6 col-sm-12">
										<div class="well white btn-margin-bottom-5">
											<h5>Default Bootstrap Buttons (customized to match theme)</h5>
											<button type="button" class="btn btn-primary">Primary</button>
											<button type="button" class="btn btn-inverse">Inverse</button>
											<button type="button" class="btn btn-danger">Danger</button>
											<button type="button" class="btn btn-success">Success</button>
											<button type="button" class="btn btn-warning">Warning</button>
											<button type="button" class="btn btn-info">Info</button> 
										</div>
										<div class="well white btn-margin-bottom-5">
											<h5>Button Sizes <small>(lg, default, sm & xs)</small></h5>
											<p><button type="button" id="btn-loading" data-loading-text="Please wait..." class="btn btn-lg btn-default">Large loading State</button>
											<button type="button" class="btn btn-primary">Primary</button>
											<button type="button" class="btn btn-sm btn-inverse">Small</button>
											<button type="button" class="btn btn-xs btn-danger">xSmall</button></p>															
										</div>
										<div class="well white btn-margin-bottom-5">
											<h5>Icon Only Buttons</h5>
											<div class="pull-left">
												<button type="button" class="btn btn-default"><i class="fa fa-male icon-only"></i></button>
												<button type="button" class="btn btn-primary"><i class="fa fa-mail-reply-all icon-only"></i></button>
												<button type="button" class="btn btn-success"><i class="fa fa-exchange icon-only"></i></button>
												<button type="button" class="btn btn-info"><i class="fa fa-comments icon-only"></i></button>
												<button type="button" class="btn btn-warning"><i class="fa fa-fire icon-only"></i></button>
												<button type="button" class="btn btn-danger"><i class="fa fa-crop icon-only"></i></button>
											</div>
											<div class="pull-right">
												<button type="button" class="btn btn-default btn-line"><i class="fa fa-male icon-only"></i></button>
												<button type="button" class="btn btn-primary btn-line"><i class="fa fa-mail-reply-all icon-only"></i></button>
												<button type="button" class="btn btn-success btn-line"><i class="fa fa-exchange icon-only"></i></button>
												<button type="button" class="btn btn-info btn-line"><i class="fa fa-comments icon-only"></i></button>
												<button type="button" class="btn btn-warning btn-line"><i class="fa fa-fire icon-only"></i></button>
												<button type="button" class="btn btn-danger btn-line"><i class="fa fa-crop icon-only"></i></button>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="well white btn-margin-bottom-5">
											<h5>Disabled</h5>	
											<button type="button" class="btn btn-primary disabled">Primary</button>
											<button type="button" class="btn btn-inverse disabled">Inverse</button>
											<button type="button" class="btn btn-danger disabled">Danger</button>
											<button type="button" class="btn btn-success disabled">Success</button>
											<button type="button" class="btn btn-warning disabled">Warning</button>
											<button type="button" class="btn btn-info disabled">Info</button>
										</div>
										<div class="well white">
											<div class="pull-left">
												<h5>Basic Example <small>with Icons in group</small></h5>
												<div class="btn-group">
													<button type="button" class="btn btn-default">View<i class="fa fa-angle-double-right icon-on-right"></i></button>
													<button type="button" class="btn btn-default active"><i class="fa fa-edit icon-only"></i></button>
													<button type="button" class="btn btn-default"><i class="fa fa-trash-o"></i>Delete</button>
												</div>
												<div class="space-8"></div>
												
												<div class="btn-toolbar">
													<div class="btn-group">
														<button type="button" class="btn btn-primary">1</button>
														<button type="button" class="btn btn-primary active">2</button>
														<button type="button" class="btn btn-primary">3</button>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-primary">4</button>
														<button type="button" class="btn btn-primary">5</button>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-primary">6</button>
													</div>
												</div>
														
												<div class="space-8"></div>
														
												<div class="btn-group">
													<button type="button" class="btn btn-inverse">1</button>
													<button type="button" class="btn btn-inverse">2</button>

													<div class="btn-group">
														<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
															More
															<span class="caret"></span>
														</button>
														<ul class="dropdown-menu dropdown-inverse">
															<li><a href="#">Dropdown link</a></li>
															<li><a href="#">Dropdown link</a></li>
														</ul>
													</div>
												</div>
											</div>
											<div class="pull-right">
												<h5>vertical group</h5>
												<div class="text-center">
													<div class="btn-group-vertical">
														<button type="button" class="btn btn-primary"><i class="fa fa-align-left icon-only"></i></button>
														<button type="button" class="btn btn-primary"><i class="fa fa-align-center icon-only"></i></button>
														<button type="button" class="btn btn-primary"><i class="fa fa-align-right icon-only"></i></button>
														
														<div class="btn-group">
															<button type="button" id="btnGroupVerticalDrop1" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
																<i class="fa fa-cog icon-only"></i>
															</button>
															<ul class="dropdown-menu dropdown-only-icon dropdown-menu-right dropdown-caret dropdown-inverse" role="menu" aria-labelledby="btnGroupVerticalDrop1">
																<li><a href="#" class="tooltip-primary" data-placement="left" data-rel="tooltip" title="" data-original-title="Edit"><i class="fa fa-edit bigger-110"></i></a></li>
																<li><a href="#" class="tooltip-primary" data-placement="left" data-rel="tooltip" title="" data-original-title="Delete"><i class="fa fa-trash-o bigger-110"></i></a></li>
															</ul>
														</div>
													</div>
												</div>
											</div>													
											<div class="clearfix"></div>
										</div>
									</div>
									<div class="col-lg-6 col-md-6 col-sm-12">
										<div class="well white btn-margin-bottom-5">
											<h5>Theme Style Buttons</h5>
											<div class="space-4"></div>
											<button type="button" class="btn"><i class="fa fa-home"></i>Default</button>
											<button type="button" class="btn btn-primary btn-line">Primary</button> 
											<button type="button" class="btn btn-inverse btn-line">Inverse</button>
											<button type="button" class="btn btn-danger btn-line">Danger</button>
											<button type="button" class="btn btn-success btn-line">Success</button>
											
											
											<button type="button" class="btn btn-warning btn-line">warning</button>
										</div>
										<div class="well white btn-margin-bottom-5">
											<h5>Circle Buttons <small>(icon only)</small></h5>
											<div class="pull-left">
												<button type="button" class="btn btn-primary btn-circle btn-line"><i class="fa fa-home icon-only"></i></button>
												<button type="button" class="btn btn-info btn-sm btn-circle btn-line"><i class="fa fa-check icon-only"></i></button> 
												<button type="button" class="btn btn-inverse btn-xs btn-circle btn-line"><i class="fa fa-link icon-only"></i></button>
												<button type="button" class="btn btn-success btn-xs btn-circle btn-line"><i class="fa fa-trash-o icon-only"></i></button>
												<button type="button" class="btn btn-danger btn-xs btn-circle btn-line"><i class="fa fa-thumbs-up icon-only"></i></button>
												<button type="button" class="btn btn-warning btn-xs btn-circle btn-line"><i class="fa fa-cog icon-only"></i></button>
											</div>
											<div class="pull-right">
												<button type="button" class="btn btn-circle"><i class="fa fa-home icon-only"></i></button>
												<button type="button" class="btn btn-info btn-sm btn-circle"><i class="fa fa-check icon-only"></i></button> 
												<button type="button" class="btn btn-inverse btn-xs btn-circle"><i class="fa fa-link icon-only"></i></button>
												<button type="button" class="btn btn-success btn-xs btn-circle"><i class="fa fa-trash-o icon-only"></i></button>
												<button type="button" class="btn btn-danger btn-xs btn-circle"><i class="fa fa-thumbs-up icon-only"></i></button>
												<button type="button" class="btn btn-warning btn-xs btn-circle"><i class="fa fa-cog icon-only"></i></button>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="well white btn-margin-bottom-5">
											<h5>Group Buttons <small>(ui group)</small></h5>
											<div class="ui-group-buttons">
												<button type="button" class="btn btn-primary"><i class="fa fa-search icon-only"></i></button>
													<div class="or"></div>
												<button type="button" class="btn btn-inverse"><i class="fa fa-edit icon-only"></i></button>
													<div class="or"></div>
												<button type="button" class="btn btn-danger"><i class="fa fa-trash-o icon-only"></i></button>
											</div>
											
											<div class="ui-group-buttons btn-group-sm">
												<button type="button" class="btn btn-primary"><span class="fa fa-thumbs-up icon-only"></span></button>
													<div class="or or-sm"></div>
												<button type="button" class="btn btn-inverse"><span class="fa fa-thumbs-down icon-only"></span></button>
											</div>
											<div class="btn-group btn-group-xs">
												<button type="button" class="btn btn-primary"><span class="fa fa-edit icon-only"></span></button>
												<button type="button" class="btn btn-inverse"><span class="fa fa-times icon-only"></span></button>
											</div>	
										</div>
										<div class="well white btn-margin-bottom-5">
											<h5>Justified</h5>
											<div class="btn-group btn-group-justified">
												<div class="btn-group">
													<button type="button" class="btn btn-primary">Left</button>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-inverse">Middle</button>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-danger">Right</button>
												</div>
											</div>
										</div>
										<div class="well white">
											<h5>Single button dropdowns</h5>
											<small>Turn a button into a dropdown toggle with some basic markup changes.</small>
											<div class="space-4"></div>
											<div class="btn-group">
												<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
												Default <span class="caret"></span>
												</button>
												<ul class="dropdown-menu dropdown-primary" role="menu">
													<li><a href="#">Action</a></li>
													<li><a href="#">Another action</a></li>
													<li class="divider"></li>
													<li><a href="#">Separated link</a></li>
												</ul>
											</div>
											<div class="btn-group btn-group-sm">
												<button type="button" class="btn btn-inverse">Split Success</button>
												<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
													<span class="caret"></span>
													<span class="sr-only">Toggle Dropdown</span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li><a href="#">Action</a></li>
													<li><a href="#">Another action</a></li>
													<li class="divider"></li>
													<li><a href="#">Separated link</a></li>
												</ul>
											</div>
											<div class="btn-group dropup btn-group-xs">
												<button type="button" class="btn btn-danger">Dropup</button>
												<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
													<span class="caret"></span>
													<span class="sr-only">Toggle Dropdown</span>
												</button>
												<ul class="dropdown-menu dropdown-danger dropdown-inverse" role="menu">
													<li><a href="#">Action</a></li>
													<li><a href="#">Another action</a></li>
													<li class="divider"></li>
													<li><a href="#">Separated link</a></li>
												</ul>
											</div>
											
											
											<h5>Custom Dropdown</h5>
											<small>By adding <code>hold-on-click</code> class you can avoid closing the dropdown on click and just add <code>dropdown-caret</code> for old styled bootstrap arrow menu</small>
											<div class="space-4"></div>
											
											<div class="btn-group">
												<button type="button" class="btn btn-default">Dropdown</button>
												<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
													<span class="caret"></span>
													<span class="sr-only">Toggle Dropdown</span>
												</button>
												<ul class="dropdown-menu hold-on-click dropdown-caret dropdown-checkboxes dropdown-menu-right dropdown-close" role="menu">
													<li><input id="option1" type="checkbox" class="tc"><label for="option1" class="labels"> Checkbox 1</label></li>
													<li><input id="option2" type="checkbox" class="tc"><label for="option2" class="labels"> Checkbox 2</label></li>
													<li><input id="option3" type="checkbox" class="tc"><label for="option3" class="labels"> Checkbox 3</label></li>
													<li><input id="option4" type="checkbox" class="tc"><label for="option4" class="labels"> Checkbox 4</label></li>
													
												</ul>
											</div>

										</div>
									</div>
								</div>
								

								<div class="well white">
									<div class="tc-tabsbar arrow no-margin-bottom"><!-- Tabs Bar -->
										<ul class="nav nav-tabs">
											<li class="active"><a href="#fontawesome" data-toggle="tab"><i class="fa fa-folder-open"></i> Font Awesome</a></li>
											<li><a href="#glyphicons" data-toggle="tab"><i class="glyphicon glyphicon-briefcase"></i> Glyphicons</a></li>
										</ul>
										<div class="tab-content">
											<div class="tab-pane fade in active" id="fontawesome">												
												<div class="row row-icons">
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-rub"></i>fa-rub
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-ruble"></i>fa-ruble <span class="text-muted">(alias)</span>
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-rouble"></i>fa-rouble <span class="text-muted">(alias)</span>
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-pagelines"></i>fa-pagelines
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-stack-exchange"></i>fa-stack-exchange
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-arrow-circle-o-right"></i>fa-arrow-circle-o-right
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-arrow-circle-o-left"></i>fa-arrow-circle-o-left
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-caret-square-o-left"></i>fa-caret-square-o-left
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-toggle-left"></i>fa-toggle-left
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-dot-circle-o"></i>fa-dot-circle-o
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-wheelchair"></i>fa-wheelchair
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-vimeo-square"></i>fa-vimeo-square
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-try"></i>fa-try
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-adjust"></i>fa-adjust
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-anchor"></i>fa-anchor
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-archive"></i>fa-archive
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-arrows"></i>fa-arrows
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-arrows-h"></i>fa-arrows-h
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-arrows-v"></i>fa-arrows-v
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-asterisk"></i>fa-asterisk
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-ban"></i>fa-ban
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bar-chart-o"></i>fa-bar-chart-o
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-barcode"></i>fa-barcode
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bars"></i>fa-bars
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-beer"></i>fa-beer
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bell"></i>fa-bell
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bell-o"></i>fa-bell-o
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bolt"></i>fa-bolt
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-book"></i>fa-book
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bookmark"></i>fa fa-bookmark
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bookmark-o"></i>fa fa-bookmark-o
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<i class="fa fa-bug"></i>fa fa-bug
													</div>
												</div>
												<div class="hr hr-double hr-8"></div>
											
												<p>(<a href="http://fontawesome.io/icons/" target="_blank">see all icons</a>)</p>
											</div>
											<div class="tab-pane fade" id="glyphicons">
												<div class="row row-icons">
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-asterisk"></span>glyphicon glyphicon-asterisk
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-plus"></span>glyphicon glyphicon-plus
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-euro"></span>glyphicon glyphicon-euro
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-minus"></span>glyphicon glyphicon-minus
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-cloud"></span>glyphicon glyphicon-cloud
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-envelope"></span>glyphicon glyphicon-envelope
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-pencil"></span>glyphicon glyphicon-pencil
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-glass"></span>glyphicon glyphicon-glass
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-music"></span>glyphicon glyphicon-music
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-search"></span>glyphicon glyphicon-search
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-heart"></span>glyphicon glyphicon-heart
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-star"></span>glyphicon glyphicon-star
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-star-empty"></span>glyphicon glyphicon-star-empty
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-user"></span>glyphicon glyphicon-user
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-film"></span>glyphicon glyphicon-film
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-th-large"></span>glyphicon glyphicon-th-large
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-th"></span>glyphicon glyphicon-th
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-th-list"></span>glyphicon glyphicon-th-list
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-ok"></span>glyphicon glyphicon-ok
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-remove"></span>glyphicon glyphicon-remove
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-zoom-in"></span>glyphicon glyphicon-zoom-in
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-zoom-out"></span>glyphicon glyphicon-zoom-out
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-off"></span>glyphicon glyphicon-off
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-signal"></span>glyphicon glyphicon-signal
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-cog"></span>glyphicon glyphicon-cog
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-trash"></span>glyphicon glyphicon-trash
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-home"></span>glyphicon glyphicon-home
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-file"></span>glyphicon glyphicon-file
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-time"></span>glyphicon glyphicon-time
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-road"></span>glyphicon glyphicon-road
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-download-alt"></span>glyphicon glyphicon-download-alt
													</div>
													<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
														<span class="glyphicon glyphicon-download"></span>glyphicon glyphicon-download
													</div>
												</div>
												<div class="hr hr-double hr-8"></div>
										
												<p>(<a href="http://getbootstrap.com/components/" target="_blank">see all icons</a>)</p>										
											</div>
										</div>
									</div>
								</div>
								<!-- END YOUR CONTENT HERE -->
					
							</div>
						</div>					
					
					<!-- BEGIN FOOTER CONTENT -->		
						<div class="footer">
							<div class="footer-inner">
								<!-- basics/footer -->
								<div class="footer-content">
									&copy; 2014 <a href="#">eKoders</a>, All Rights Reserved.
								</div>
								<!-- /basics/footer -->
							</div>
						</div>
						<button type="button" id="back-to-top" class="btn btn-primary btn-sm back-to-top">
							<i class="fa fa-angle-double-up icon-only bigger-110"></i>
						</button>
					<!-- END FOOTER CONTENT -->
						
				</div><!-- /#page-wrapper -->	  
			<!-- END MAIN PAGE CONTENT -->
		</div>  
	</div> 
	 
    <!-- core JavaScript -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/js/plugins/pace/pace.min.js"></script>

	<!-- PAGE LEVEL PLUGINS JS -->

    <!-- Themes Core Scripts -->	
	<script src="assets/js/main.js"></script>
	
	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<script src="assets/js/speech-commands.js"></script>
	<script src="assets/js/plugins/gritter/jquery.gritter.min.js"></script>

	<!-- initial page level scripts for examples -->
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.init.js"></script>	
  </body>
</html>